<template>
  <div class="centermap">
    <div class="mapwrap">
      <div id="chart" class="chart" ref="chartRef"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
import { optionHandle, regionCodes } from './center.map'
import { ElMessage } from 'element-plus'
import { getAirportCity } from '@/api/home'

import type { MapdataType } from './center.map'

const option = ref({})
const code = ref('china') // 默认显示中国
const chartRef = ref<HTMLDivElement | null>(null)
const chartInstance = ref<echarts.ECharts | null>(null)

const getGeojson = async (regionCode: string) => {
  try {
    const response = await axios.get(`/map-geojson/china.json`)
    echarts.registerMap(regionCode, response.data)
    return response.data
  } catch (error) {
    console.error('Failed to load geojson:', error)
  }
}

const dataSetHandle = async (regionCode: string, list: object[]) => {
  const geojson = await getGeojson(regionCode)
  let cityCenter: Record<string, any> = {}
  let mapData: MapdataType[] = []
  if (geojson) {
    geojson.features.forEach((element: any) => {
      cityCenter[element.properties.name] = element.properties.centroid || element.properties.center
    })
    list.forEach((item: any) => {
      if (cityCenter[item.name]) {
        mapData.push({
          name: item.name,
          value: cityCenter[item.name].concat(item.airportCount),
          flyingCount: cityCenter[item.name].concat(item.flyingCount),
          airportCount: cityCenter[item.name].concat(item.airportCount)
        })
      }
    })
    await nextTick()
    option.value = optionHandle(regionCode, list, mapData)
    if (chartInstance.value) {
      chartInstance.value.setOption(option.value)
    }
  }
}
const getAirportOfCity = async () => {
  const res = await getAirportCity()
  const originData = res.data

  const transformedData = originData.map((item) => {
    const provinceName = Object.keys(item)[0]
    const provinceData = item[provinceName]

    // 根据省份名称映射到目标结构
    return {
      name: provinceName, // 去掉“省”字
      airportCount: provinceData.airportCount, // 使用原始数据中的值
      flyingCount: provinceData.flyingCount // 使用原始数据中的值
    }
  })
  dataList.value = transformedData
  dataList.value = [...transformedData]
  return transformedData
}
let dataList = ref([
  
])
const getData = async (regionCode: string) => {
  dataSetHandle('china', dataList.value)
}

// const mapClick = (params: any) => {
//   let xzqData = regionCodes[params.name]
//   if (xzqData) {
//     getData(xzqData.adcode)
//   } else {
//     ElMessage.warning('暂无下级地市')
//   }
// }

const handleResize = () => {
  if (chartInstance.value) {
    chartInstance.value.resize()
  }
}

onMounted(async () => {
  try {
    await getData(code.value)

    await getAirportOfCity()
    await getData(code.value)

    if (chartRef.value) {
      chartInstance.value = echarts.init(chartRef.value)
      chartInstance.value.setOption(option.value)
      // chartInstance.value.on('click', mapClick)

      // 添加窗口 resize 事件监听
      window.addEventListener('resize', handleResize)
    }
  } catch (error) {
    console.error('Error loading JSON:', error)
  }
})
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
})
</script>

<style scoped lang="less">
.centermap {

  padding-top: 8%;
  position: relative;
  .mapwrap {
    height: 880px;
    width: 100%;
    box-sizing: border-box;
    position: relative;

    .chart {
      width: 100%;
      height: 100%;
    }

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow:
        0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }
  }
}
@media screen and (min-height: 1000px) {
  .centermap {
    padding-top: 15%  !important;

  }
  
}

</style>
